<!-- Quarters.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>岗位</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" href="../../css/base.css">
		<style>
			html {
				background: #FFFFFF;
			}
			body {
				width: 100%;
				background: #FFFFFF;
				margin: 0px;
			}
			.win_bar_bot {
				width: 100%;
				height: 40px;
				position: absolute;
				top: 66px;
			}
			.top_bar {
				width: 100%;
				height: 40px;
				display: -webkit-box;
			}
			.top_bar_center {
				width: 100%;
				padding: 10px;
				height: 25px;
			}
			.bar_zw {
				width: 25%;
				height: 18px;
			}
			.bar {
				width: 25%;
				height: 18px;
				border-style: solid;
				border-width: 0px 0px 0px 1px;
				border-color: #d9d9d9;
			}
			.bar_text {
				font-size: 15px;
				display: -webkit-inline-box;
				-webkit-margin-before: 0em;
				-webkit-margin-after: 0em;
				-webkit-margin-start: 0px;
				-webkit-margin-end: 0px;
				padding-right: 6px;
			}
			.bar_td {
				width: 100%;
				height: 18px;
				display: -webkit-box;
				line-height: 18px;
				text-align: -webkit-center;
				-webkit-appearance: none !important;
				-moz-appearance: none !important;
				-webkit-border-radius: 0;
				-webkit-appearance: listbox;
				
				/*background: #fff url('') no-repeat 98% center;*/
			}
			.bar_td img {
				padding-bottom: 3px;
			}
			tr {
				width: 100%;
				height: 35%;
			}
			table {
				width: 100%;
				height: 35%;
				position: inherit;
				margin-top: 10px;
				margin-bottom: 10px;
				border-spacing: 0px;
			}
			.width_10{width: 7px;
			}
		</style>
	</head>
	<body>
		<!--<div class="base_navigation_bar base_style_color">
		<span>认证岗位</span>
		</div>-->
		 <div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar">
			<a class="base_left_item" href="#" onclick="backIndex()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span>认证岗位</span>
			<a class="base_right_item base_hide_item"> </a>
		</div>
		<div class="win_bar_bot">
			<div class="top_bar">
				<table>
					<tr>
						<td class="bar_zw">
						<div class="bar_td" onclick="check_type(0)">
							<p class="bar_text base_dark_grey " id="type">
								职业认证
							</p>
						<img class="width_10" id="type_img" src="../../icon/icon_type_jt.png"/>
						</div></td>
						<td class="bar">
						<div class="bar_td" onclick="check_type(1)">
							<p class="bar_text base_dark_grey " id="qu_fx">
								方向
							</p>
							<img class="width_10" id="qu_fx_img" src="../../icon/icon_type_jt.png"/>
						</div></td>
						<td class="bar">
						<div class="bar_td" onclick="check_type(2)">
							<p class="bar_text base_dark_grey " id="qu_cj">
								层级
							</p>
							<img  class="width_10"  id="qu_cj_img" src="../../icon/icon_type_jt.png"/>
						</div></td>
						<td class="bar">
						<div class="bar_td" onclick="check_type(3)">
							<p class="bar_text base_dark_grey " id="qu_xl">
								序列
							</p>
							<img  class="width_10 " id="qu_xl_img" src="../../icon/icon_type_jt.png"/>
						</div></td>
					</tr>
				</table>
			</div>
		</div>
		<div style="position:absolute;top:106px;width: 100%;height: 5px;background-color: #f0f0f0;"></div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript">
		var markisshow = false;
		var type_data = new Object();
		var gder = 0;
		//0：职业认证   1专项人认证
		apiready = function() {
			setupNotifi();
			$api.setStorage("lx", "");
			$api.setStorage("fx", "");
			$api.setStorage("cj", "");
			$api.setStorage("xl", "");
			api.addEventListener({
				name : 'close_mask'
			}, function(ret, err) {
				//coding...
				markisshow = false;
				api.closeFrame({
					name : 'typelist'
				});
			});
			//分类
			api.addEventListener({
				name : 'item_point'
			}, function(ret, err) {
				if (ret) {
//					alert(JSON.stringify(ret.value));
					var data = ret.value.data;
					var type = ret.value.type;
					var id = data[type].id;
					var name = data[type].name;
					if (type == 0) {//类型
						id = data[type].id;
						if (id == 2) {//专项认证
							gder = 1;
							$("#type").html("专项认证");
							$("#type").addClass("base_style_text_color");
			
							$("#qu_fx").html("全部");
							$("#qu_cj").html("全部");
							$("#qu_xl").html("全部");
						} else {
							gder = 0;
							$("#type").html("职业认证");
							$("#type").addClass("base_style_text_color");
							$("#qu_fx").html("方向");
							$("#qu_cj").html("层级");
							$("#qu_xl").html("序列");
						}
						$("#type_img").attr({'src':'../../icon/icon_type_top_blue.png'});
						$("#qu_cj_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_fx_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_xl_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_cj").removeClass("base_style_text_color");
						$("#qu_fx").removeClass("base_style_text_color");
						$("#qu_xl").removeClass("base_style_text_color");
					} else if (type == 1) {//方向
						$("#qu_fx").html(name);
						$("#qu_fx").addClass("base_style_text_color");
						$("#qu_cj").html("全部");
						$("#qu_xl").removeClass("base_style_text_color");
					    $("#qu_cj").removeClass("base_style_text_color");
						$("#type").removeClass("base_style_text_color");
						$("#qu_fx_img").attr({'src':'../../icon/icon_type_top_blue.png'});
						$("#type_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_cj_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_xl_img").attr({'src':'../../icon/icon_type_jt.png'});
					} else if (type == 2) {//层级
						$("#qu_cj").html(name);
						$("#qu_cj").addClass("base_style_text_color");
						$("#qu_xl").html("全部");
					    $("#qu_xl").removeClass("base_style_text_color");
						$("#qu_fx").removeClass("base_style_text_color");
						$("#type").removeClass("base_style_text_color");
						$("#qu_cj_img").attr({'src':'../../icon/icon_type_top_blue.png'});
						$("#type_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_fx_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_xl_img").attr({'src':'../../icon/icon_type_jt.png'});
					} else if (type == 3) {//序列
					   $("#qu_xl").addClass("base_style_text_color");
						$("#qu_xl").html(name);
						$("#qu_cj").removeClass("base_style_text_color");
						$("#qu_fx").removeClass("base_style_text_color");
						$("#type").removeClass("base_style_text_color");
						$("#qu_xl_img").attr({'src':'../../icon/icon_type_top_blue.png'});
						$("#type_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_fx_img").attr({'src':'../../icon/icon_type_jt.png'});
						$("#qu_cj_img").attr({'src':'../../icon/icon_type_jt.png'});
					}
				}
			});
		};
		function openframe() {
			var y = $('.base_navigation_bar').height()+22;
			var h = api.winHeight - y - 52 - 45;
			api.openFrame({
				name : 'Quarters_list',
				url : 'Quarters_list.html',
				rect : {
					x : 0,
					y : y + 45,
					w : 'auto',
					h : h
				}
			});
		}

		function setupNotifi() {
			api.addEventListener({
				name : 'showDirectoriesFrameNotifi'
			}, function(ret, err) {
				//coding...
				SendBehaviorTrajectoriesNotifi1(0, '岗位列表', '119',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
				showHomeFrame();
			});
			api.addEventListener({
				name : 'hideDirectoriesFrameNotifi'
			}, function(ret, err) {
				//coding...
				SendBehaviorTrajectoriesNotifi1(1, '岗位列表', '119',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
				hideHomeFrame();
				api.sendEvent({
					name : 'mark_close'
				});
				markisshow = false;
				api.closeFrame({
					name : 'typelist'
				});
			});
		}

		function showHomeFrame() {
			openframe();
			api.setFrameAttr({
				name : 'Quarters_list',
				hidden : false
			});
		}

		function hideHomeFrame() {
			api.setFrameAttr({
				name : 'Quarters_list',
				hidden : true
			});
		}

		//方向、层级、序列下拉列表
		function check_type(type) {
			if (gder == 0) {
				if (markisshow) {
					api.sendEvent({
						name : 'mark_close'
					});
					markisshow = false;
					api.closeFrame({
						name : 'typelist'
					});
				} else {
					api.sendEvent({
						name : 'mark_show'
					});
					markisshow = true;
					var y = $('.base_navigation_bar').height()+22;
					var h =200;
					if(type==0){
					 h = 82;
					}
					api.openFrame({
						name : 'typelist',
						url : 'Quar_typelist.html',
						rect : {
							x : 0,
							y : y + 45,
							w : 'auto',
							h : h
						},
						pageParam : {
							type : type,
						}
					});
				}
			} else {
				if (type != 0) {
					api.toast({
						msg : '专项认证暂无选项！！'
					});
				} else {
					if (markisshow) {
						api.sendEvent({
							name : 'mark_close'
						});
						markisshow = false;
						api.closeFrame({
							name : 'typelist'
						});
					} else {
						api.sendEvent({
							name : 'mark_show'
						});
						markisshow = true;
						var y = $('.base_navigation_bar').height()+22;
						var h =200;
						if(type==0){
							 h = 82;
						}
						api.openFrame({
							name : 'typelist',
							url : 'Quar_typelist.html',
							rect : {
								x : 0,
								y : y + 45,
								w : 'auto',
								h : 200
							},
							pageParam : {
								type : type,
							}
						});
					}
				}
			}
		}
	</script>
</html>